<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../assets/flexible/flexible_css.debug.js"></script>
    <script src="../assets/flexible/flexible.debug.js"></script>
    <link rel="stylesheet" href="../css/index_fx.css">
    <link rel="stylesheet" href="../../node_modules/swiper/dist/css/swiper.min.css">
    <link rel="stylesheet" href="../css/iconfont.css">
</head>
<body>
    <header class="header">
        <div>查找课程,用户,话题</div>
        <ul class="hd-cont">
            <li>
                <a href="javascript:void(0);" class="active">精选</a>
            </li>
            <li>
                <a href="javascript:void(0);">训练</a>
            </li>
            <li>
                <a href="javascript:void(0);">饮食</a>
            </li>
        </ul>
    </header>

    <main class="main">
        <div class="swiper-container" id="main">
            <div class="swiper-wrapper">
                <div class="swiper-slide fx_jx">
                    <figure>
                        <img src="../images/index-fx/banner.png" class="banner">
                    </figure>
                    <div class="topic">
                        <h2>话题讨论<span><i class="iconfont icon-fanhui1"></i></span></h2> 
                        <div class="picture">
                                <div class="swiper-container" id="picture">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <figure>
                                            <img src="../images/index-fx/pic_one.png" class="pic">
                                        </figure>
                                    </div>
                                    <div class="swiper-slide">
                                        <figure>
                                            <img src="../images/index-fx/pic_two.png"  class="pic">
                                        </figure>
                                    </div>
                                    <div class="swiper-slide">
                                        <figure>
                                            <img src="../images/index-fx/pic_three.png"  class="pic">
                                        </figure>
                                    </div>
                                    <div class="swiper-slide">
                                        <figure>
                                            <img src="../images/index-fx/pic_three.png"  class="pic">
                                        </figure>
                                    </div>
                                    <div class="swiper-slide">
                                        <figure>
                                            <img src="../images/index-fx/pic_one.png"  class="pic">
                                        </figure>
                                    </div>
                                </div>
                            </div>        
                        </div>
                        
                    </div>
                    <div class="hot">
                        <h2>热门活动<span><i class="iconfont icon-fanhui1"></i></span></h2>
                        <figure>
                            <img src="../images/index-fx/hot.png">
                        </figure>
                    </div>
                </div>
                <div class="swiper-slide fx_xl">
                    <figure>
                        <img src="../images/index-fx/banner_xl.png" class="banner_xl">
                    </figure>
                    <ul class="xl_nav">
                        <li>
                            <img src="../images/index-fx/xl-nav.png"><span>动作库</span></li>
                        <li>
                            <img src="../images/index-fx/xl-nav.png"><span>动作库</span>
                        </li>
                        <li>
                            <img src="../images/index-fx/xl-nav.png"><span>动作库</span>
                        </li>
                    </ul>
                    <div class="content">
                        <h2>
                            推荐训练
                            <span>
                                <i class="iconfont icon-fanhui1"></i>
                            </span>
                        </h2>
                        <div class="swiper-container cont">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/index-fx/cont.png">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-fx/cont.png">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-fx/cont.png"> 
                                </div>
                            </div>
                        </div>
                        <h2>
                            新手入门
                            <span>
                                <i class="iconfont icon-fanhui1"></i>
                            </span>
                        </h2>
                        <div class="swiper-container cont">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/index-fx/cont.png">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-fx/cont.png">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/index-fx/cont.png"> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide fx_ys">
                    <figure>
                        <img src="../images/index-fx/fx-ys.png" class="banner_xl">
                    </figure>
                    <ul class="xl_nav">
                        <li>
                            <img src="../images/index-fx/swk.png"><span>食物库</span></li>
                        <li>
                            <img src="../images/index-fx/swk.png"><span>早餐</span>
                        </li>
                        <li>
                            <img src="../images/index-fx/swk.png"><span>午餐</span>
                        </li>
                        <li>
                            <img src="../images/index-fx/swk.png"><span>晚餐</span>
                        </li>
                    </ul>
                    <div class="news">
                        <!-- <h2>
                            一张图证明我的厨艺
                            <span>
                                <i class="iconfont icon-fanhui1"></i>
                            </span>
                        </h2>
                        <ul>
                            <li>
                                <img src="../images/index-fx/gold_df.png">
                                <p>黄金豆腐</p>
                                <span>288kcal</span>
                            </li>
                            <li>
                                <img src="../images/index-fx/gold_df.png">
                                <p>黄金豆腐</p>
                                <span>288kcal</span>
                            </li>
                            <li>
                                <img src="../images/index-fx/gold_df.png">
                                <p>黄金豆腐</p>
                                <span>288kcal</span>
                            </li>
                        </ul> -->
                    </div>
                </div>
            </div>
        </div>
    </main>



    <footer class="footer">
        <a href="../html/index.html">
            <img src="../images/public/ft-xl-c.png">
            <p>训练</p>
        </a>
        <a href="../html/index_fx.html">
            <img src="../images/public/ft-fx-c.png">
            <p>发现</p>
        </a>
        <a href="../html/index_dt.html">
            <img src="../images/public/ft-dt.png" >
            <p>动态</p>
        </a>
        <a href="javascript:void(0)">
            <img src="../images/public/ft-wd.png">
            <p>我的</p>
        </a>
    </footer>
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../../node_modules/swiper/dist/js/swiper.js"></script>
    <script src="../assets/artTemplate/template-web.js"></script>
    <script  type="text/html" id="template-item">
        {{each list v i}}
        <h2>
            {{v.h2title}}
            <span>
                <i class="iconfont icon-fanhui1"></i>
            </span>
        </h2>
        <ul>
            <li>
                <img src="{{v.imgurl}}">
                <p>{{v.ptitle}}</p>
                <span>{{v.span_con}}</span>
            </li>
            <li>
                <img src="{{v.imgurl}}">
                <p>{{v.ptitle}}</p>
                <span>{{v.span_con}}</span>
            </li>
            <li>
                <img src="{{v.imgurl}}">
                <p>{{v.ptitle}}</p>
                <span>{{v.span_con}}</span>
            </li>
        </ul>
        {{/each}}
    </script>
    <script>
        var mySwiper = new Swiper ('#main', {
            direction: 'horizontal',
            autoHeight: true,
            onTransitionEnd:function(swiper){
                $(".hd-cont>li").eq(swiper.activeIndex).trigger("click");
            }
        })
        $(".hd-cont>li").on("click",function(e){
            e.preventDefault();
            $(".active").removeClass("active");
            $(this).children().addClass("active");
            mySwiper.slideTo($(this).index());
        })
        var mySwiper1 = new Swiper ('#picture', {
            direction: 'horizontal',
            autoHeight: true,
            nested:true,
            slidesPerView : 3,
            spaceBetween : 20,
        })
        var mySwiper2 = new Swiper ('.cont', {
            direction: 'horizontal',
            autoHeight: true,
            nested:true,
            slidesPerView : 2,
            spaceBetween : 20,
        })
        $.ajax({
            url:"../json/data.json",
            type:"get",
            success:function(data){
                var str=template("template-item",{list:data});
                $(".news").html(str);
            }
        })
    </script>
</body>
</html>